<template>
    <div>
        <Header :activIndex = "5"></Header>
        <div class="top_big">
            <img :src="img" alt="">
        </div>
        <div class="main_width phone_about">
            <div class="nav"></div>
            <div class="flex">
                <div class="w15">
                    <div class="pro_tit">关于我们</div>
                    <div class="lf_tit_item item_bor" :class="active==0?'tit_active':''" @click="active=0"><i class="el-icon-arrow-right" v-show="active==0"></i>农交简介</div>
                    <div class="lf_tit_item" :class="active==1?'tit_active':''" @click="active=1"><i class="el-icon-arrow-right" v-show="active==1"></i>联系我们</div>
                </div>
                <div class="w85">
                    <template  v-if="!active">
                        <div class="block_tit">
                            <div>农交简介</div>
                            <!-- <div>更多>></div> -->
                        </div>
                        <p class="abouts">{{aboutsContent}}</p>
                    </template>    
                    <template v-else>
                        <div class="block_tit">
                            <div>联系我们</div>
                            <!-- <div>更多>></div> -->
                        </div>
                        <div class="about_list">   
                            <div>
                                <img src="../components/static/img/phone.png" alt="">
                                <div>电话：{{msg.mobile}}</div>
                            </div>
                            <div>
                                <img src="../components/static/img/mailbox.png" alt="">
                                <div>邮编：{{msg.code}}</div>
                            </div>
                            <div>
                                <img src="../components/static/img/url.png" alt="">
                                <div>网址：{{msg.sites}}</div>
                            </div>
                            <div>
                                <img src="../components/static/img/location.png" alt="">
                                <div>地址：{{msg.address}}</div>
                            </div>
                        </div>
                        <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="my_amap mt_50">
                            <el-amap-info-window
                            :position="currentWindow.position"
                            :content="msg.address"
                            :visible="currentWindow.visible"
                            :events="currentWindow.events">
                            </el-amap-info-window>
                        </el-amap>
                    </template>
                   
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { AMapManager } from 'vue-amap';
    import Header from "../components/header"
    export default {
        components: {
          Header,  
        }, 
        data(){
            return {
                active:0,
                img:'',
                aboutsContent:'',
                msg:{},
                zoom: 14,
                center: [120.211256,30.240753],
                currentWindow: {
                    position: [120.211256,30.240753],
                    content: '',
                    visible: true,
                }
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            getData(){
                this.get('/api/abouts/page').then((data)=>{
                    this.img=data.data.slidesDTOList[0].slideImage;
                    this.aboutsContent=data.data.aboutsDTOList[0].aboutsContent
                });
                this.get('/api/contacts/page').then(data=>{
                    this.msg=data.data.list[0]
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .my_amap{
        width: 100%;
        height: 400px;
    }
    .abput_map{
        width: 500px;
        height: 400px;
    }
    .about_list{
        >div{
            display: flex;
            flex-direction: row;
            margin: 20px 0;
            >img{
                margin-right:10px;
                width: 18px;
            }
        }
    }
    .abouts{
       text-indent: 2em; 
       line-height: 20px;
       padding: 30px 0
    }
    .w15{
        width: 15%
    }
    .w85{
        width: 82%;
        min-height: 500px
    }
    .lf_tit_item{
        font-size: 15px;
        text-align: center;
        margin: 10px 0;
        position: relative;
        cursor: pointer;
        >i{
            position: absolute;
            left: 0;
            top: 3px
        }
    }
    .pro_tit{
        background: #2C9F45;
        color: #fff;
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
    }
    .item_bor{
        border-bottom: 2px dotted #CCCCCC;
        padding-bottom:10px; 
    }
    .block_tit{
        border-bottom: 2px solid #2C9F45;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .block_tit>div:first-child{
        font-size: 18px;
        letter-spacing:5px;
        color: #2C9F45;
        padding: 10px;
        padding-top: 0 
    }
    td{
        border-bottom: 0!important
    }
    .tab_mar{
        margin:20px 0
    }
    .tit_active{
        color: #2C9F45
    }
    .top_big{height: 490px;}
    .top_big img{
        width: 100%;height: 490px;background: no-repeat center / cover;
    }    
</style>